<!-- src/views/Layout.vue -->
<template>
  <div class="dashboard-layout">
    <!-- 左侧菜单栏 -->
    <aside class="sidebar">
      <div class="logo">
        <img src="../assets/logo.png" alt="logo" />
      </div>
      <nav class="menu">
        <ul>
          <li>
            <router-link to="/dashboard" :class="{ active: isActive('/dashboard') }">系统概述</router-link>
          </li>
          <li>
            <router-link to="/dashboard/course-manage" :class="{ active: isActive('/dashboard/course-manage') }">课程管理</router-link>
          </li>
          <li>
            <router-link to="/dashboard/user-manage" :class="{ active: isActive('/dashboard/user-manage') }">用户管理</router-link>
          </li>
          <li>
            <router-link to="/dashboard/chapter-manage" :class="{ active: isActive('/dashboard/chapter-manage') }">章节管理</router-link>
          </li>
          <li>
            <router-link to="/dashboard/material-manage" :class="{ active: isActive('/dashboard/material-manage') }">资料管理</router-link>
          </li>
          <li>
            <router-link to="/dashboard/profile" :class="{ active: isActive('/dashboard/profile') }">个人中心</router-link>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <div class="main-content-wrapper">
      <!-- 顶部标题栏 -->
      <header class="top-bar">
        <h2>{{ currentRouteName }}</h2>
        <div class="user-dropdown">
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="user-info">
              <span>{{ userInfo.name || '未登录' }}</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>

      <!-- 子路由内容将在这里渲染 -->
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { getUserInfo } from '@/api/user.js';
import { useRouter, useRoute } from 'vue-router';

export default {
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const userInfo = ref({});

    // 计算当前路由名称
    const currentRouteName = computed(() => {
      const routeNames = {
        '系统概述': '/dashboard',
        '用户管理': '/dashboard/user-manage',
        '课程管理': '/dashboard/course-manage',
        '章节管理': '/dashboard/chapter-manage',
        '资料管理': '/dashboard/material-manage',
        '个人中心': '/dashboard/profile'
      };
      return Object.keys(routeNames).find(key => routeNames[key] === route.path) || '系统概览';
    });

    // 判断当前路由是否匹配
    const isActive = (path) => {
      return route.path === path;
    };

    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        const res = await getUserInfo();
        if (res.code === 1) {
          userInfo.value = res.data;
        } else {
          console.error('获取用户信息失败：', res.message);
        }
      } catch (error) {
        console.error('请求用户信息出错：', error);
      }
    };

    // 处理退出登录
    const handleCommand = (command) => {
      if (command === 'logout') {
        localStorage.removeItem('isLoggedIn');
        router.push('/login');
      }
    };

    onMounted(() => {
      fetchUserInfo();
    });

    return {
      userInfo,
      currentRouteName,
      isActive,
      handleCommand
    };
  }
};
</script>

<style scoped>
/* 布局样式 - 与原Dashboard.vue样式基本一致 */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.sidebar {
  position: fixed; /* 关键修改：固定定位 */
  left: 0;
  top: 0;
  height: 100vh; /* 占据整个视口高度 */
  width: 8%;
  min-width: 120px;
  background-color: #5793F3;
  color: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto; /* 添加滚动条以防菜单内容过多 */
  z-index: 1000; /* 确保在内容上方 */
}

.sidebar .logo {
  width: 80%;
  margin-bottom: 20px;
}

.sidebar .logo img {
  width: 100%;
}

.sidebar .menu {
  width: 100%;
}

.sidebar .menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar .menu li {
  margin-bottom: 15px;
  text-align: center;
}

.sidebar .menu a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 8px 0;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.sidebar .menu a:hover, .sidebar .menu a.active {
  background-color: #76ADFC;
}

.main-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: calc(8% + 20px); /* 关键修改：添加左边距 */
  width: calc(92% - 20px); /* 调整宽度 */
  min-height: 100vh;
}

.top-bar {
  position: sticky; /* 可选：顶部标题栏也固定 */
  height: 8%;
  min-height: 60px;
  background-color: #fff;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.top-bar h2 {
  margin: 0;
  font-size: 20px;
}

.user-dropdown {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-info span {
  margin-right: 10px;
}

.user-info i {
  font-size: 12px;
}

.main-content {
  flex: 1;
  overflow-y: auto; /* 允许内容区域独立滚动 */
  padding: 20px;
}
</style>